<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>个人理财系统</title>
    <!-- 引入bootstrap样式 -->
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <!--图标库-->
    <link th:href="@{/lyear/css/materialdesignicons.min.css}" rel="stylesheet" type="text/css" />
    <!--自定义样式-->
    <link href="../lyear/css/style.min.css" th:href="@{/lyear/css/style.min.css}" rel="stylesheet" type="text/css" />
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .risk-preference-card {
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .risk-preference-card .card-body {
            padding: 25px;
        }

        .risk-level-box {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
        }

        .risk-level {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .risk-level-保守型 {
            color: #28a745;
        }

        .risk-level-稳健型 {
            color: #17a2b8;
        }

        .risk-level-平衡型 {
            color: #ffc107;
        }

        .risk-level-进取型 {
            color: #fd7e14;
        }

        .risk-level-激进型 {
            color: #dc3545;
        }

        .risk-score {
            font-size: 18px;
            color: #666;
            margin-bottom: 10px;
        }

        .risk-update-time {
            font-size: 14px;
            color: #999;
        }

        .portfolio-advice,
        .risk-analysis {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        }

        .risk-advice .card {
            border: none;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
        }

        .risk-advice i {
            font-size: 24px;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <!--左侧导航-->
            <div th:replace="user/common/leftbar::#leftbaraside"></div>
            <!--头部信息-->
            <div th:replace="user/common/topbar::#topbarheader"></div>

            <!--页面主要内容-->
            <main class="lyear-layout-content">
                <div class="container-fluid">
                    <div class="row">
                        <!-- 风险偏好卡片 -->
                        <div class="col-lg-12">
                            <div class="card risk-preference-card">
                                <div class="card-header">
                                    <h4>我的风险偏好</h4>
                                </div>
                                <div class="card-body">
                                    <div th:if="${riskPreference != null}">
                                        <!-- 风险等级和评分展示 -->
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="risk-level-box">
                                                    <div class="risk-level">
                                                        风险等级：<span th:text="${riskPreference.riskLevel}"
                                                            th:class="${'risk-level-' + riskPreference.riskLevel}"></span>
                                                    </div>
                                                    <div class="risk-score">
                                                        风险评分：<span th:text="${riskPreference.score}"></span>
                                                    </div>
                                                    <div class="risk-update-time">
                                                        更新时间：<span th:text="${riskPreference.updateTime}"></span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 风险等级仪表盘 -->
                                            <div class="col-md-6">
                                                <div id="riskGauge" style="height:350px;"></div>
                                            </div>
                                        </div>

                                        <!-- 投资组合建议 -->
                                        <div class="row mt-4">
                                            <div class="col-md-6">
                                                <div class="portfolio-advice">
                                                    <h5>建议投资组合</h5>
                                                    <div id="portfolioPie" style="height:300px;"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="risk-analysis">
                                                    <h5>风险特征分析</h5>
                                                    <div id="riskRadar" style="height:300px;"></div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 风险等级说明和建议 -->
                                        <div class="risk-advice mt-4">
                                            <div class="card">
                                                <div class="card-body">
                                                    <h5>风险偏好分析</h5>
                                                    <p th:switch="${riskPreference.riskLevel}">
                                                        <span th:case="'保守型'">
                                                            <i class="mdi mdi-shield-outline"></i>
                                                            您属于保守型投资者，偏好低风险投资产品，追求稳定收益。
                                                            <br>• 建议投资品种：定期存款(40%)、货币基金(40%)、债券基金(20%)
                                                            <br>• 预期年化收益：3%-4%
                                                            <br>• 风险特点：本金安全为主，收益稳定性高
                                                        </span>
                                                        <span th:case="'稳健型'">
                                                            <i class="mdi mdi-scale-balance"></i>
                                                            您属于稳健型投资者，能够承担适度风险，追求相对稳定的收益。
                                                            <br>• 建议投资品种：债券基金(40%)、稳健型理财产品(30%)、货币基金(20%)、股票基金(10%)
                                                            <br>• 预期年化收益：4%-6%
                                                            <br>• 风险特点：追求稳定增值，可承受小幅波动
                                                        </span>
                                                        <span th:case="'平衡型'">
                                                            <i class="mdi mdi-chart-line"></i>
                                                            您属于平衡型投资者，能够接受中等风险，追求收益与风险的平衡。
                                                            <br>• 建议投资品种：混合型基金(40%)、债券基金(30%)、股票基金(20%)、货币基金(10%)
                                                            <br>• 预期年化收益：6%-8%
                                                            <br>• 风险特点：收益风险平衡，投资组合多元化
                                                        </span>
                                                        <span th:case="'进取型'">
                                                            <i class="mdi mdi-trending-up"></i>
                                                            您属于进取型投资者，能够承担较高风险，追求较高收益。
                                                            <br>• 建议投资品种：股票基金(50%)、混合型基金(30%)、债券基金(15%)、货币基金(5%)
                                                            <br>• 预期年化收益：8%-12%
                                                            <br>• 风险特点：以追求资本增值为主，可承受较大波动
                                                        </span>
                                                        <span th:case="'激进型'">
                                                            <i class="mdi mdi-rocket"></i>
                                                            您属于激进型投资者，能够承担高风险，追求高收益。
                                                            <br>• 建议投资品种：股票基金(70%)、混合型基金(20%)、债券基金(10%)
                                                            <br>• 预期年化收益：12%以上
                                                            <br>• 风险特点：追求最大化收益，能够承受剧烈波动
                                                        </span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div th:if="${riskPreference == null}" class="text-center">
                                        <p>暂无风险偏好数据，请进行理财操作后系统将自动分析您的风险偏好。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 新闻资讯卡片 -->
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4>新闻资讯</h4>
                                </div>
                            </div>
                        </div>

                        <div th:if="${!newsList.isEmpty()}" th:each="news:${newsList}">
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header bg-primary">
                                        <h4 th:text="${news.title}"></h4>
                                        <ul class="card-actions">
                                            <li>
                                                <p th:text="${#dates.format(news.createtime, 'yyyy-MM-dd')}"></p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-body">
                                        <p th:text="${news.newsdesc}">
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div th:if="${newsList.isEmpty()}" class="card-body">
                            <div class="table-responsive">
                                <h4>很抱歉！暂时还没有新闻向您推荐</h4>
                            </div>
                        </div>

                    </div>
                </div>
            </main>
            <!--End 页面主要内容-->
        </div>
    </div>

    <!-- 引入jQuery和bootstrap的js -->
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <!--滚动条插件-->
    <script th:src="@{/lyear/js/perfect-scrollbar.min.js}"></script>
    <!--自定义js脚本-->
    <script th:src="@{/lyear/js/main.min.js}"></script>

    <!-- ECharts图表相关JavaScript -->
    <script th:inline="javascript">
        $(document).ready(function () {
            // 获取风险偏好数据
            var riskPreference = [[${ riskPreference }]];
            if (riskPreference) {
                // 初始化仪表盘
                initRiskGauge(riskPreference.score);
                // 初始化投资组合饼图
                initPortfolioPie(riskPreference.riskLevel);
                // 初始化风险特征雷达图
                initRiskRadar(riskPreference.riskLevel);
            }
        });

        // 仪表盘图表
        function initRiskGauge(score) {
            var gaugeChart = echarts.init(document.getElementById('riskGauge'));
            var option = {
                series: [{
                    type: 'gauge',
                    detail: { formatter: '{value}' },
                    data: [{ value: score }],
                    max: 20,
                    axisLabel: {
                        formatter: function (value) {
                            if (value <= 3) return '保守';
                            else if (value <= 6) return '稳健';
                            else if (value <= 9) return '平衡';
                            else if (value <= 12) return '进取';
                            else return '激进';
                        }
                    }
                }]
            };
            gaugeChart.setOption(option);
        }

        // 投资组合饼图
        function initPortfolioPie(riskLevel) {
            var pieChart = echarts.init(document.getElementById('portfolioPie'));
            var data = getPortfolioData(riskLevel);
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}%'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: data.map(item => item.name)
                },
                series: [{
                    name: '建议配置',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }]
            };
            pieChart.setOption(option);
        }

        // 风险特征雷达图
        function initRiskRadar(riskLevel) {
            var radarChart = echarts.init(document.getElementById('riskRadar'));
            var data = getRiskFeatureData(riskLevel);
            var option = {
                radar: {
                    indicator: [
                        { name: '收益期望', max: 100 },
                        { name: '风险承受', max: 100 },
                        { name: '投资经验', max: 100 },
                        { name: '流动性需求', max: 100 },
                        { name: '投资期限', max: 100 }
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: data,
                        name: '风险特征'
                    }]
                }]
            };
            radarChart.setOption(option);
        }

        // 根据风险等级获取投资组合数据
        function getPortfolioData(riskLevel) {
            switch (riskLevel) {
                case '保守型':
                    return [
                        { name: '定期存款', value: 40 },
                        { name: '货币基金', value: 40 },
                        { name: '债券基金', value: 20 }
                    ];
                case '稳健型':
                    return [
                        { name: '债券基金', value: 40 },
                        { name: '稳健理财', value: 30 },
                        { name: '货币基金', value: 20 },
                        { name: '股票基金', value: 10 }
                    ];
                case '平衡型':
                    return [
                        { name: '混合型基金', value: 40 },
                        { name: '债券基金', value: 30 },
                        { name: '股票基金', value: 20 },
                        { name: '货币基金', value: 10 }
                    ];
                case '进取型':
                    return [
                        { name: '股票基金', value: 50 },
                        { name: '混合型基金', value: 30 },
                        { name: '债券基金', value: 15 },
                        { name: '货币基金', value: 5 }
                    ];
                case '激进型':
                    return [
                        { name: '股票基金', value: 70 },
                        { name: '混合型基金', value: 20 },
                        { name: '债券基金', value: 10 }
                    ];
                default:
                    return [];
            }
        }

        // 根据风险等级获取风险特征数据
        function getRiskFeatureData(riskLevel) {
            switch (riskLevel) {
                case '保守型':
                    return [30, 20, 40, 90, 80];
                case '稳健型':
                    return [50, 40, 60, 70, 70];
                case '平衡型':
                    return [60, 60, 70, 60, 60];
                case '进取型':
                    return [80, 70, 80, 40, 50];
                case '激进型':
                    return [90, 90, 85, 30, 40];
                default:
                    return [0, 0, 0, 0, 0];
            }
        }
    </script>
</body>

</html>